<template>
    <img id="logo" alt="Wails logo" src="@/assets/images/logo-universal.png" />
    <div
        style="
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        ">
        <div style="display: flex; flex-direction: row; width: 100%; justify-content: center">
            <n-input
                v-model:value="input_value"
                placeholder="输入文件夹路径"
                style="max-width: 500px; flex: 1; margin-right: 0" />
            <n-button @click="handleGetFolder()">选择文件夹</n-button>
        </div>
        <hr style="border: none; margin: 0.375rem" />
        <p style="margin: 0">
            ※挑选的图片将会存放到上述目录下面的文件夹
            <span style="color: orange">{{ compute_dateString() }}</span>
            里面
        </p>
        <div style="display: flex">
            <n-button
                type="primary"
                style="width: min-content"
                @click="handleConfirm()"
                :disabled="!input_value">
                上市
            </n-button>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { NButton, NInput, useMessage } from 'naive-ui'
import { SelectFolder, GetFolderFile_Array } from '@wails/go/main/App'
const message = useMessage()
const input_value = ref('')

function compute_dateString() {
    const d = new Date()
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0') // 月份从0开始，需+1
    const day = String(d.getDate()).padStart(2, '0')
    return `picked-${year}${month}${day}`
}

function handleGetFolder() {
    SelectFolder()
        .then((result) => {
            if (result) {
                input_value.value = result
            } else {
                message.info('取消选择')
            }
        })
        .catch((err) => {
            message.error('选择文件夹失败')
        })
}

function handleConfirm() {
    GetFolderFile_Array(input_value.value)
        .then((result) => {
            if (result) {
                emit('return:file_list', result)
            } else {
                message.warning('该目录不含符合的文件')
            }
        })
        .catch((err) => {
            message.error(err)
        })
}

const emit = defineEmits(['return:file_list'])
onMounted(() => {
    //handleConfirm()
})
</script>
<style scoped>
#logo {
    display: block;
    width: 50vw;
    max-width: 300px;
    height: 100%;
    margin: auto;
    padding-top: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}
</style>
